<template>
    <div class="menu-banner">
        <div class="b2" v-if="banners1">
            <div class="item" v-for="(item,index) in banners1" :key="index">
                <img :src="item.img" alt="" class="img">
                <span class="title">{{item.name}}</span>
            </div>
        </div>
        <div class="b1" v-if="banners2">
            <cube-slide :data="banners2">
                <cube-slide-item v-for="(item, index) in banners2" :key="index">
                    <a :href="item.url">
                        <img class="img" :src="item.img">
                    </a>
                </cube-slide-item>
            </cube-slide>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            banners1: {
                type: Array,
                default: function () {
                    return []
                }
            },
            banners2: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {


            }
        }
    }
</script>

<style scoped lang="stylus">
    .menu-banner
        padding 0 9px

        .b2
            display flex
            justify-content space-between
            align-items center
            .item
                flex 1
                position relative
                &:last-child
                    margin-left 5px
                .img
                    width 100%
                    /*height 90px*/
                    border-radius 5px

            .title
                font-size 14px
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                position absolute
                left 12px
                top 12px

        .b1
            border-radius 5px
            overflow hidden
            .img
                height 130px
                width 100%

</style>